<template>
  <div>
    <h1>computed函数使用</h1>
  </div>

  <ul>
    <li>{{ count }}</li>
    <li>vue2:{{ doubleCount }}</li>
    <li>{{ num }}</li>
    <li>vue3:{{ doubleNum }}</li>
    <li>
      <button @click="num = Math.floor(Math.random() * 10 + 1)">随机</button>
    </li>
  </ul>
  <br />
  <h2>大于4的</h2>
  <ul>
    <li v-for="item in change" :key="item">{{ item }}</li>
  </ul>
</template>

<script>
import { ref, computed } from 'vue'
export default {
  data() {
    return {
      count: 10,
    }
  },
  computed: {
    doubleCount() {
      return this.count * 2
    },
  },
  setup() {
    // 1. 从vue框架中导入computed 函数
    // 2. 在setup函数中执行computed函数，并传入一个函数，在函数中定义计算公式
    // 3. 把computed函数调用完的执行结果放到setup的return值对象中

    const num = ref(20)
    const doubleNum = computed(() => {
      return num.value * 2
    })

    // 课堂练习: ref定义数组 [4,5,6] 使用computed函数计算大于4的值 把大于4的值用v-for渲染到模板

    const arr = ref([4, 5, 6])
    const change = computed(() => {
      return arr.value.filter((item) => item > 4)
    })
    return { num, doubleNum, arr, change }
  },
}
</script>

<style></style>
